<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<style>
			.row {
				margin: 15px 0;
				line-height: 40px;
			}
			.row > div {
				height: 40px;
				background-color: #eee;
				text-align: center;
				border: 1px solid #ccc;
				border-right: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<h3>Grid栅格</h3>
		<p>栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。</p>
		<p>MUI的栅格系统把水平空间划分为12列进行布局。</p>

		<h4>基本实例</h4>
		<section>
			<div class="example">
				<p>将<mark>column</mark>置于<mark>row</mark>内。</p>
				<p>你的内容应置于<mark>column</mark>内。</p>
				<p>通过<mark>.col-x</mark>控制列宽。</p>
				<p>通过<mark>.col-offset-x</mark>控制列偏移。</p>
				<div class="row">
					<div class="col-4">col-4</div>
					<div class="col-4">col-4</div>
					<div class="col-4">col-4</div>
				</div>
				<div class="row">
					<div class="col-4">col-4</div>
					<div class="col-8">col-8</div>
				</div>
				<div class="row">
					<div class="col-2">col-2</div>
					<div class="col-7">col-7</div>
					<div class="col-3">col-3</div>
				</div>
				<div class="row">
					<div class="col-6 col-offset-4">col-6 col-offset-4</div>
				</div>
				<div class="row">
					<div class="col-4 col-offset-2">col-4 col-offset-2</div>
					<div class="col-4 col-offset-2">col-4 col-offset-2</div>
				</div>
			</div>
			<pre><code>
	&lt;div class="row"&gt;
		&lt;div class="col-4"&gt;col-4&lt;/div&gt;
		&lt;div class="col-4"&gt;col-4&lt;/div&gt;
		&lt;div class="col-4"&gt;col-4&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="row"&gt;
		&lt;div class="col-4"&gt;col-4&lt;/div&gt;
		&lt;div class="col-8"&gt;col-8&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="row"&gt;
		&lt;div class="col-2"&gt;col-2&lt;/div&gt;
		&lt;div class="col-7"&gt;col-7&lt;/div&gt;
		&lt;div class="col-3"&gt;col-3&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="row"&gt;
		&lt;div class="col-6 col-offset-4"&gt;col-6 col-offset-4&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="row"&gt;
		&lt;div class="col-4 col-offset-2"&gt;col-4 col-offset-2&lt;/div&gt;
		&lt;div class="col-4 col-offset-2"&gt;col-4 col-offset-2&lt;/div&gt;
	&lt;/div&gt;
			</code></pre>
		</section>

		<script>
		$(document).ready(function() {
			$('pre code').each(function(i, block) {
			hljs.highlightBlock(block);
			});
		});
		</script>
	</body>
</html>